<!-- 害虫列表dev_type==1 -->
<template>
	<view class="page">
		<template v-if="token && isLogin">
			<view class="h45 m-b2">
				<view class="fix-wrap search-tool">
					<view class="search-tool-form">
						<view class="iconfont">&#xe663;</view>
						<template v-if="dev_type == 1">
							<input type="text" confirm-type="search" class="key-inp" placeholder="输入害虫名称" @input="setKeyword" />
						</template>
						<template v-if="dev_type == 2">
							<input type="text" confirm-type="search" class="key-inp" placeholder="输入设备名称" />
						</template>
						<template v-if="dev_type == 3">
							<input type="text" v-model="params.keyword" confirm-type="search" class="key-inp" placeholder="输入害虫名称" @input="setKeyword" />
						</template>
					</view>
				</view>
			</view>
			<view class="body">
				<template v-if="!initloading.default">
					<template v-if="list.length > 0">
						<template v-if="dev_type == 1">
							<view class="list-wrap">
								<view class="item" v-for="(item, index) in filterList" :key="index" @click="selectPest(item.id, item.pest_name, item.pest_cname)">
									<view class="title">{{ item.pest_name }}</view>
								</view>
							</view>
							<loading :loadingState="moreloading"></loading>
						</template>
						<template v-else-if="dev_type == 2">
							<view class="list-wrap">
								<view class="item" v-for="(item, index) in list" :key="index" @click="selectDevName(item.id, item.device_name)">
									<view class="title">{{ item.device_name }}</view>
								</view>
							</view>
							<loading :loadingState="moreloading"></loading>
						</template>
						<template v-else-if="dev_type==3">
							<view class="list-wrap">
								<view class="item" v-for="(item, index) in list" :key="item.id">
									<view class="head" style="display: flex;justify-content: space-between;">
										<view class="title">{{ item.pest_name }}</view>
										<view class="btn-wrap">
											<view @click="showModal(item)" class="btn" style="color: dodgerblue;">
												设置
											</view>
										</view>
									</view>
									<view class="info">
										预警值：{{item.warning}}
									</view>
								</view>
							</view>
							<loading :loadingState="moreloading"></loading>
						</template>
					</template>
					<empty v-else>
						<view slot="text">没有相关信息</view>
					</empty>
				</template>
				<template v-else>
					<loading :loadingState="initloading"></loading>
				</template>
			</view>
		</template>

		<wl-modal ref="modal">
			<template v-slot:content>
				<view class="content" style="max-width: 100%;border: 2rpx solid #ddd;border-radius: 8rpx;overflow: hidden;padding: 15rpx;">
					<input type="number" v-model.trim="params.warning" />
				</view>
			</template>
		</wl-modal>

	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue';
	import empty from '@/components/empty.vue';
	import { getCurrenPage } from '@/common/util.js';
	export default {
		name: 'name',
		data() {
			return {
				token: uni.getStorageSync('token'),
				appid: getApp().globalData.appid,
				userInfo: uni.getStorageSync('userInfo'),
				isLogin: false,
				loginStateUpdate: false,
				initloading: { default: true },
				moreloading: { loading: false, completed: false },
				params: {
					page: 1,
					limit: 20,
					warning: '',
					keyword: ''
				},
				dev_type: '', // 1 性诱  3.虫情虫子列表
				open_type: 1, //2 虫情预警设置
				list: [],
				filterList: [],

			};
		},
		async onLoad(params) {
			this.dev_type = params.dev_type;

			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					if (this.dev_type == 1) {
						this.getxyPest();
					} else if (this.dev_type == 2) {
						this.getDevList();
					} else if (this.dev_type == 3) {
						this.getPestList()
					}
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			}
		},
		async onShow() {
			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				this.loginStateUpdate = false;
			}

			if (!this.token && !this.isLogin) {
				this.isLogin = await this.$loginState('reset');
			}
		},

		onReady() {
			if (this.dev_type == 1 || this.dev_type == 3) {
				uni.setNavigationBarTitle({
					title: '害虫种类'
				});
			} else if (this.dev_type == 2) {
				uni.setNavigationBarTitle({
					title: '设备名称'
				});
			}
		},

		onReachBottom() {
			if (this.moreloading.completed) return

			this.params.page++
			if (this.dev_type == 1) {
				this.getxyPest();
			}
			// if (this.dev_type == 2) {
			// 	this.getDevList();
			// }
			if (this.dev_type == 3) {
				this.getPestList()
			}
		},

		methods: {

			showModal(item) {
				this.$refs.modal.showModal({
					title: '修改预警值',
					confirmText: '修改',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							if (!this.params.warning) return uni.showToast({
								icon: 'none',
								title: '请输入预警值',
								success: () => {
									this.showModal(item)
								}
							})
							this.pestset(item, res.content)
						}
					}
				})

			},

			async pestset(item) {
				let res = await this.$api.tool_api.getXypzPestList({
					appid: this.appid,
					token: this.token,
					recid: item.id,
					warning: this.params.warning
				})
				if (res.data.ret == 1000) {
					let find = this.list.find(it => it.id == item.id)
					if (find) {
						find.warning = this.params.warning
					}
					this.params.warning = ''
					uni.showToast({
						icon: 'success',
						title: '修改成功'
					})
				}
			},

			getxyPest: async function() {
				if (this.params.page != 1) {
					this.moreloading.loading = true;
				}
				let res = await this.$api.tool_api.getXypzPestList({
					appid: this.appid,
					token: this.token,
					page: this.params.page,
					limit: this.params.limit
				}).finally(() => {
					this.initloading.default = false;
					this.moreloading.loading = false;
				});
				if (res.data.ret == 1000) {
					this.list = this.list.concat(res.data.data);
					this.filterList = JSON.parse(JSON.stringify(this.list));
					if (res.data.total < this.params.limit) {
						this.moreloading.completed = true;
					}
				}
			},

			getPestList: async function() {
				if (this.params.page != 1) {
					this.moreloading.loading = true;
				}
				let res = await this.$api.tool_api.pestlist({
					appid: this.appid,
					token: this.token,
					page: this.params.page,
					limit: this.params.limit,
					keyword: this.params.keyword
				}).finally(() => {
					this.initloading.default = false;
					this.moreloading.loading = false;
				});
				if (res.data.ret == 1000) {
					this.list = this.list.concat(res.data.data);
					if (res.data.total < this.params.limit) {
						this.moreloading.completed = true;
					}
				}
			},


			selectPest: function(id, name, cname) {
				let prevPage = getCurrenPage(2);
				prevPage.$vm.pests.id = id;
				prevPage.$vm.pests.name = name;
				prevPage.$vm.params.attr_name = name;
				prevPage.$vm.params.attr_num = 'RF-' + cname.toLocaleUpperCase();
				uni.navigateBack({
					delta: 1
				});
			},

			getDevList: async function() {
				let res = await this.$api.tool_api.getXypzDevList({
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid,
					device_type: 14
				}).finally(() => {
					this.initloading.default = false;
					this.moreloading.loading = false;
					this.moreloading.completed = true;
				});
				console.log('设备列表', res);
				if (res.data.ret == 1000) {
					this.list = res.data.data;
				}
			},

			selectDevName(id, name) {
				let prevPage = getCurrenPage(2);
				prevPage.$vm.dev_name = name;
				prevPage.$vm.dev_id = id;
				uni.navigateBack({
					delta: 1
				});
			},

			setKeyword(e) {
				if (this.dev_type == 1) {
					clearTimeout(this.timer);
					this.timer = setTimeout(() => {
						// console.log(1111);
						this.keyword = e.detail.value;
						this.filterList = this.list.filter(item => item.pest_name.indexOf(this.keyword) > -1);
						this.timer = null;
					}, 500);
				}
				if (this.dev_type == 3) {
					clearTimeout(this.timer)
					this.timer = setTimeout(() => {
						// console.log(1111);
						this.list = []
						this.params.page = 1
						this.getPestList()
						this.timer = null
					}, 500);
				}
			}
		},
		components: {
			empty,
			loading
		},
		computed: {},
		watch: {}
	};
</script>

<style lang="less">
	.search-tool-form {
		margin: 7px 10px;
		// height: 30px;
		border: 2rpx solid #ddd;
		background: #f2f2f2;
		border-radius: 38rpx;
		display: flex;
		flex-grow: 2;

		.iconfont {
			width: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: #999;
			font-size: 44rpx;
		}

		.key-inp {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			color: #666;
			flex-grow: 2;
		}
	}

	.list-wrap {
		background: #fff;

		.item {
			padding: 20rpx;
			border-bottom: 2rpx solid #eee;
			font-size: 30rpx;
			// margin-left: 20rpx;

			.title {
				margin-bottom: 10rpx;
			}


			.time {
				padding-left: 10rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>